<template>
  <div class="main-div">
    <a-form-model ref="form" :model="formData" layout="horizontal" :rules="validatorRules">
      <a-card :bordered="false" title="推送策略" class="push-poliicy">
        <!-- <a-row >
          <a-col :span="24"> -->
        <a-form-model-item label="诈骗类型" class="type-item">
          <a-checkbox
            class="all-check-item"
            :indeterminate="indeterminateType"
            v-model="checkAllType"
            @change="onCheckAllTypeChange"
            >全部
          </a-checkbox>
          <!-- <a-checkbox-group class="check-item" v-model="formData.bilkType" :options="bilkTypeOptions" @change="onChangeType" >
              </a-checkbox-group> -->
          <j-multi-select-tag
            class="check-item"
            v-model="formData.bilkType"
            dictCode="fraud_type"
            type="checkbox"
            ref="bilkTypeMultiSelect"
            @change="onChangeType"
          />
        </a-form-model-item>
        <!-- </a-col>
        </a-row> -->
        <a-row :gutter="24">
          <a-col>
            <a-form-model-item label="预警等级">
              <a-checkbox :indeterminate="indeterminateGrade" :checked="checkAllGrade" @change="onCheckAllGradeChange"
                >全部
              </a-checkbox>
              <!-- <a-checkbox-group v-model="formData.warnLevel" :options="warnLevelOptions" @change="onChangeGrade" /> -->
              <j-multi-select-tag
                v-model="formData.warnLevel"
                dictCode="early_warning_level"
                type="checkbox"
                ref="warnLevelMultiSelect"
                @change="onChangeGrade"
              />
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-card>

      <a-card style="margin-top: 24px" :bordered="false" title="定位依据配置">
        <!-- <a-row :gutter="24">
          <a-col >
            <a-form-model-item label="定位策略" >
                <a-tooltip
                    placement="top"
                    title="指选择定位数据配置"
                    class="tooltip-wrap"
                >
                  <a-icon type="question-circle" />
                </a-tooltip>
                <a-button class="btn-space btn-unselect" @click="onHandleLocation($event,1)">基站位置</a-button>
                <a-button class="btn-space btn-unselect" @click="onHandleLocation($event,2)">IP位置</a-button>
                <a-popover trigger="click" placement="bottomLeft" :visible="popoverShow" @visibleChange="handleClickChange" > 
                  <template slot="content">
                    <a-radio-group v-model="formData.hybridPositionPriority" >
                      <a-radio :style="radioStyle" :value="1">
                       基站位置分发
                      </a-radio>
                      <a-radio :style="radioStyle" :value="2">
                        IP位置分发
                      </a-radio>
                    </a-radio-group>
                  </template>
                  <a-button @click="onHandleLocation($event,3)"  :class="['btn-space', btnLocation3? 'btn-select' : 'btn-unselect']" >
                    混合定位
                  </a-button>
                </a-popover>
                <a-tooltip
                    placement="topLeft"
                    title="当选择两种数据分发时，需要勾选其中一条为第一个查询方式；当都不勾选情况下，系统默认先查询基站位置分发。"
                    style="margin-right:10px;"
                >
                  <a-icon type="question-circle" />
                </a-tooltip>
            </a-form-model-item>
          </a-col>
        </a-row> -->

        <a-row :gutter="24">
          <a-col>
            <a-form-model-item label="定位策略" class="location-form">
              <a-tooltip placement="top" title="指选择定位数据配置" class="tooltip-wrap">
                <a-icon type="question-circle" />
              </a-tooltip>
              <a-button
                :class="['btn-space', formData.positionPloy == 1 ? 'btn-select' : 'btn-unselect']"
                @click="changeLocation(1)"
                >基站位置</a-button
              >
              <a-button
                :class="['btn-space', formData.positionPloy == 2 ? 'btn-select' : 'btn-unselect']"
                @click="changeLocation(2)"
                >IP位置</a-button
              >
              <a-popover
                trigger="click"
                placement="bottomLeft"
                :visible="popoverShow"
                @visibleChange="handleClickChange"
              >
                <template slot="content">
                  <a-radio-group v-model="formData.hybridPositionPriority">
                    <a-radio :style="radioStyle" :value="'1'"> 基站位置分发 </a-radio>
                    <a-radio :style="radioStyle" :value="'2'"> IP位置分发 </a-radio>
                  </a-radio-group>
                </template>
                <a-button
                  @click="changeLocation(3)"
                  :class="['btn-space', formData.positionPloy == 3 ? 'btn-select' : 'btn-unselect']"
                >
                  混合定位
                </a-button>
              </a-popover>
              <a-tooltip
                placement="topLeft"
                title="当选择混合定位时，需要勾选其中一条为主查询方式;"
                style="margin-right: 10px"
              >
                <a-icon type="question-circle" />
              </a-tooltip>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-card>

      <a-card style="margin-top: 24px" :bordered="false" title="短信预警配置" class="sms-configure">
        <a-row :gutter="24">
          <a-col>
            <a-form-model-item label="短信次数">
              <a-radio-group v-model="formData.isOpenSmsNum">
                <a-radio :value="'1'">开启</a-radio>
                <a-radio :value="'0'">关闭</a-radio>
              </a-radio-group>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="24" v-if="formData.isOpenSmsNum == '1'">
          <a-col style="display: flex">
            <a-form-model-item
              label="短信配置"
              :prop="formData.isOpenSmsNum == '1' ? 'maxSmsNum' : ''"
              :class="formData.isOpenSmsNum == '1' ? 'sms-count-wrap' : ''"
              class="sms-configure-xing"
            >
              <div style="width: 320px">
                同个号码一天内最多重复发送
                <a-input-number
                  v-model="formData.maxSmsNum"
                  :formatter="limitDecimals"
                  :parser="limitDecimals"
                  placeholder=""
                  :min="1"
                  style="width: 80px"
                  :disabled="formData.isOpenSmsNum == '0'"
                />
                次，
              </div>
            </a-form-model-item>
            <a-form-model-item :prop="formData.isOpenSmsNum == '1' ? 'timeInterval' : ''" class="sms-time-wrap">
              <div>
                发送短信时间间隔
                <a-input-number
                  v-model="formData.timeInterval"
                  :formatter="limitDecimals1"
                  :parser="limitDecimals1"
                  placeholder=""
                  :min="1"
                  style="width: 80px"
                  :disabled="formData.isOpenSmsNum == '0'"
                />
                小时
              </div>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col>
            <a-form-model-item label="挂机短信">
              <a-tooltip
                placement="top"
                title="指开启挂机短信在打完劝阻电话完成时系统自动发送预警短信"
                class="tooltip-wrap"
              >
                <a-icon type="question-circle" />
              </a-tooltip>
              <a-radio-group v-model="formData.hangUpSms">
                <a-radio :value="'1'">开启</a-radio>
                <a-radio :value="'0'">关闭</a-radio>
              </a-radio-group>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col>
            <a-form-model-item label="定时预警-短信">
              <a-tooltip
                placement="top"
                title="指开启定时预警，设定预警时间对疑似受害人发送预警短信；当停止此功能时将不再自动发送预警短信，需人工操作预警。"
                class="tooltip-wrap"
              >
                <a-icon type="question-circle" />
              </a-tooltip>
              <a-radio-group v-model="formData.autoSendSms">
                <a-radio :value="'1'">开启</a-radio>
                <a-radio :value="'0'">关闭</a-radio>
              </a-radio-group>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col>
            <a-form-model-item label="定时预警-智能语音">
              <a-tooltip
                placement="top"
                title="指开启定时预警，设定预警时间对疑似受害人发送预警短信；当停止此功能时将不再自动发送预警短信，需人工操作预警。"
                class="tooltip-wrap"
              >
                <a-icon type="question-circle" />
              </a-tooltip>
              <a-radio-group v-model="formData.autoSendVoice">
                <a-radio :value="'1'">开启</a-radio>
                <a-radio :value="'0'">关闭</a-radio>
              </a-radio-group>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="24" v-if="formData.autoSendSms == '1' || formData.autoSendVoice == '1'">
          <a-col>
            <a-form-model-item label="立即生效">
              <j-multi-select-tag
                v-model="formData.autoSendWeek"
                :options="weekData"
                placeholder="请选择"
                style="width: 500px"
              >
              </j-multi-select-tag>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="24" v-if="formData.autoSendSms == '1' || formData.autoSendVoice == '1'">
          <a-col>
            <a-form-model-item style="margin-left: 130px">
              <a-time-picker
                :default-value="moment(formData.autoSendStartTime, 'HH:mm')"
                @change="(val, dateStrings) => changeTime(val, dateStrings, 'autoSendStartTime')"
                format="HH:mm"
              />
              ——
              <a-time-picker
                :default-value="moment(formData.autoSendEndTime, 'HH:mm')"
                @change="(val, dateStrings) => changeTime(val, dateStrings, 'autoSendEndTime')"
                format="HH:mm"
              />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col>
            <a-form-model-item label="短信-预警等级" prop="levelTimingSwitch" style="margin-left: -12px !important" class="sms-configure-xing">
              <j-multi-select-tag v-model="formData.levelTimingSwitch" :options="levelTimingSwitchOptions" type="checkbox" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col>
            <a-form-model-item label="智能语音-预警等级" prop="levelVoiceTimingSwitch" style="margin-left: -12px !important" class="sms-configure-xing">
              <j-multi-select-tag v-model="formData.levelVoiceTimingSwitch" :options="levelTimingSwitchOptions" type="checkbox" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col>
            <a-form-model-item
              label="短信模板"
              prop="smsTemplateId"
              style="margin-left: -12px !important"
              class="sms-configure-xing"
            >
              <select-message
                v-model="formData.smsTemplateId"
                :templateType="1"
                @change="onSelectMsgChange"
              ></select-message>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col>
            <a-form-model-item
              label="智能语音模板"
              prop="voiceTemplateId"
              style="margin-left: -12px !important"
              class="sms-configure-xing"
            >
              <select-message
                v-model="formData.voiceTemplateId"
                :templateType="5"
                :placeholder="'智能语音模板'"
                @change="onSelectVoiceMsgChange"
              ></select-message>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-checkbox-group @change="onCheckboxChange" v-model="selectKeys">
          <a-row :gutter="24" v-if="formData.isOpenSmsNum == '1'">
            <a-checkbox :value="1" style="position: absolute; left: 146px"> </a-checkbox>
            <a-col style="display: flex">
              <a-form-model-item label="智能语音配置">
                <div style="margin-left: 32px">
                  高危 当智能语音外呼失败时，间隔
                  <a-input-number
                    v-model="formData.highInterval"
                    :formatter="limitDecimals"
                    :parser="limitDecimals"
                    placeholder=""
                    :min="1"
                    style="width: 80px;margin:0 5px;"
                    :disabled="formData.isOpenSmsNum == '0'"
                  />
                </div>
              </a-form-model-item>
              <a-form-model-item>
                <div>
                  分钟后自动重新外呼直到成功，同个号码一天内最多可呼叫
                  <a-input-number
                    v-model="formData.highMaxNum"
                    :formatter="limitDecimals1"
                    :parser="limitDecimals1"
                    placeholder=""
                    :min="1"
                    style="width: 80px;margin:0 5px;"
                    :disabled="formData.isOpenSmsNum == '0'"
                  />
                  次
                </div>
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row :gutter="24" v-if="formData.isOpenSmsNum == '1'">
            <a-checkbox :value="2" style="position: absolute; left: 146px"> </a-checkbox>
            <a-col style="display: flex; margin-left: 130px">
              <a-form-model-item label="">
                <div style="margin-left: 32px">
                  中危 当智能语音外呼失败时，间隔
                  <a-input-number
                    v-model="formData.middleInterval"
                    :formatter="limitDecimals"
                    :parser="limitDecimals"
                    placeholder=""
                    :min="1"
                    style="width: 80px;margin:0 5px;"
                    :disabled="formData.isOpenSmsNum == '0'"
                  />
                </div>
              </a-form-model-item>
              <a-form-model-item>
                <div>
                  分钟后自动重新外呼直到成功，同个号码一天内最多可呼叫
                  <a-input-number
                    v-model="formData.middleMaxNum"
                    :formatter="limitDecimals1"
                    :parser="limitDecimals1"
                    placeholder=""
                    :min="1"
                    style="width: 80px;margin:0 5px;"
                    :disabled="formData.isOpenSmsNum == '0'"
                  />
                  次
                </div>
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row :gutter="24" v-if="formData.isOpenSmsNum == '1'">
            <a-checkbox :value="3" style="position: absolute; left: 146px"> </a-checkbox>
            <a-col style="display: flex; margin-left: 130px">
              <a-form-model-item label="">
                <div style="margin-left: 32px">
                  低危 当智能语音外呼失败时，间隔
                  <a-input-number
                    v-model="formData.lowInterval"
                    :formatter="limitDecimals"
                    :parser="limitDecimals"
                    placeholder=""
                    :min="1"
                    style="width: 80px;margin:0 5px;"
                    :disabled="formData.isOpenSmsNum == '0'"
                  />
                </div>
              </a-form-model-item>
              <a-form-model-item>
                <div>
                  分钟后自动重新外呼直到成功，同个号码一天内最多可呼叫
                  <a-input-number
                    v-model="formData.lowMaxNum"
                    :formatter="limitDecimals1"
                    :parser="limitDecimals1"
                    placeholder=""
                    :min="1"
                    style="width: 80px;margin:0 5px;"
                    :disabled="formData.isOpenSmsNum == '0'"
                  />
                  次
                </div>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-checkbox-group>
      </a-card>

      <a-card style="margin-top: 24px" :bordered="false" title="数据限制配置">
        <a-row :gutter="24">
          <a-col>
            <a-form-model-item label="是否限制">
              <a-radio-group v-model="formData.isOpenLimitData">
                <a-radio :value="'1'">是</a-radio>
                <a-radio :value="'0'">否</a-radio>
              </a-radio-group>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col>
            <a-form-model-item
              label="数据限制"
              prop="maxDataNum"
              class="limit-count-wrap"
              v-if="formData.isOpenLimitData == '1'"
            >
              <div>
                预警数据每日最多推送
                <a-input-number
                  v-model="formData.maxDataNum"
                  :formatter="limitDecimals"
                  :parser="limitDecimals"
                  placeholder=""
                  :min="1"
                  style="width: 80px"
                />
                条
              </div>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-card>

      <a-card style="margin-top: 24px" :bordered="false" title="消息通知配置">
        <a-row :gutter="24">
          <a-col>
            <a-form-model-item label="消息推送" class="xxts">
              <a-tooltip placement="top" title="针对平台消息推送提醒的开启/关闭" class="tooltip-wrap">
                <a-icon type="question-circle" />
              </a-tooltip>
              <a-radio-group v-model="formData.stationMessageStatus" style="margin-left: 0px">
                <a-radio :value="'1'">开启</a-radio>
                <a-radio :value="'0'">关闭</a-radio>
              </a-radio-group>
            </a-form-model-item>
            <a-form-model-item label="数据下发消息提醒">
              <a-radio-group v-model="formData.dataInfo" style="margin-left: 20px">
                <a-radio :value="1">开启</a-radio>
                <a-radio :value="0">关闭</a-radio>
              </a-radio-group>
            </a-form-model-item>
            <a-form-model-item label="预警督办消息提醒">
              <a-radio-group v-model="formData.warnInfo" style="margin-left: 20px">
                <a-radio :value="1">开启</a-radio>
                <a-radio :value="0">关闭</a-radio>
              </a-radio-group>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-card>

      <a-card style="margin-top: 24px" :bordered="false" title="预警等级转换配置">
        <a-row :gutter="24">
          <a-col :span="20">
            <a-form-model-item label="是否转换">
              <a-tooltip placement="top" title="针对预警等级“中危、高危”转换“紧急”功能开启配置" class="tooltip-wrap">
                <a-icon type="question-circle" />
              </a-tooltip>
              <a-radio-group v-model="formData.levelStatus">
                <a-radio :value="1">开启</a-radio>
                <a-radio :value="0">关闭</a-radio>
              </a-radio-group>
            </a-form-model-item>
            <div style="display: flex">
              <div style="margin-top: 5px">
                <span style="color: #333">转换条件：</span>
                <a-tooltip placement="top" title="预警等级可勾选其中一项或两项" class="tooltip-wrap">
                  <a-icon type="question-circle" />
                </a-tooltip>
              </div>
              <div>
                <a-form-model-item label="预警等级" prop="warningLevel">
                  <j-checkbox v-model="formData.warningLevel" :options="jCheckboxOptions1" style="margin-left: 6px" />
                </a-form-model-item>
                <a-form-model-item label="实时位置" prop="timeLocation">
                  <j-checkbox v-model="formData.timeLocation" :options="jCheckboxOptions2" style="margin-left: 6px" />
                </a-form-model-item>
                <a-form-model-item label="反馈情况" prop="feedbackSituation">
                  <j-checkbox
                    v-model="formData.feedbackSituation"
                    :options="jCheckboxOptions3"
                    style="margin-left: 6px"
                  />
                </a-form-model-item>
              </div>
            </div>
          </a-col>
        </a-row>
      </a-card>

       <a-card style="margin-top: 24px" :bordered="false" title="公安部数据回填配置">
        <a-row :gutter="24">
          <a-col :span="20">
            <a-form-model-item label="高危">
              <j-multi-select-tag
                v-model="formData.dataBackfillHighConfig"
                dictCode="disposal_pattern"
                type="checkbox"
              />
            </a-form-model-item>
            <a-form-model-item label="中危">
              <j-multi-select-tag
                v-model="formData.dataBackfillMiddleConfig"
                dictCode="disposal_pattern"
                type="checkbox"
              />
            </a-form-model-item>
            <a-form-model-item label="低危">
              <j-multi-select-tag
                v-model="formData.dataBackfillLowConfig"
                dictCode="disposal_pattern"
                type="checkbox"
              />
            </a-form-model-item>
            <a-form-model-item label="其他">
              <j-multi-select-tag
                v-model="formData.dataBackfillOtherConfig"
                dictCode="disposal_pattern"
                type="checkbox"
              />
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-card>
    </a-form-model>
    <a-affix :offset-bottom="0" style="margin-top: 24px">
      <a-card :bordered="false">
        <a-space>
          <a-button type="primary" :loading="confirmLoading" @click="onSave">保存</a-button>
          <a-button @click="onDelete" :loading="loadingDelete" v-if="id">删除</a-button>
          <a-button @click="onCancel">取消</a-button>
        </a-space>
      </a-card>
    </a-affix>
  </div>
</template>

<script>
import { policyConfigAdd, policyConfigQueryById, policyConfigEdit, policyConfigDelete } from '@/api/warning/Policy.js'
import moment from 'moment'
import SelectMessage from '../components/SelectMessage.vue'
import { getDictItemsFromCache } from '@/api/api'
const limitDecimals = (value) => {
  return value.replace(/^(0+)|[^\d]+/g, '')
}
const limitDecimals1 = (value) => {
  return value.replace(/^[^\d]/g, '')
}
export default {
  components: {
    SelectMessage,
  },
  inject: ['closeCurrent'],
  data() {
    return {
      switchFlag: true,
      validatorRules: {
        maxSmsNum: [{ required: true, message: '请输入短信配置次数!' }],
        timeInterval: [{ required: true, message: '请输入短信配置时间间隔!' }],
        smsTemplateId: [{ required: true, message: '请选择短信模版!' }],
        voiceTemplateId: [{ required: true, message: '请选择智能语音模板!' }],
        maxDataNum: [{ required: true, message: '请输入推送条数!' }],
        warningLevel: [{ required: true, message: '请选择预警等级!' }],
        timeLocation: [{ required: true, message: '请选择实时位置!' }],
        feedbackSituation: [{ required: true, message: '请选择反馈情况!' }],
      },
      formData: {
        bilkType: null,
        warnLevel: null,
        // locationArr:[],
        positionPloy: undefined,
        hybridPositionPriority: '',
        autoSendWeek: '1,2,3,4,5,6,7', //['1','2','3','4','5','6','7'],
        autoSendStartTime: '22:00',
        autoSendEndTime: '08:00',
        isOpenSmsNum: '1',
        hangUpSms: '0',
        maxSmsNum: 2,
        timeInterval: 3,
        smsTemplateId: '',
        voiceTemplateId: '',
        autoSendSms: '0',
        autoSendVoice: '0',
        highInterval: '',
        middleInterval: '',
        lowInterval: '',
        highMaxNum: '',
        middleMaxNum: '',
        lowMaxNum: '',
        highStatus: 0,
        middleStatus: 0,
        lowStatus: 0,
        // status:'0',
        // startEffectDate:'',
        // endEffectDate:'',
        isOpenLimitData: '0',
        stationMessageStatus: '1',
        dataInfo: 1,
        warnInfo: 1,
        maxDataNum: undefined,
        levelStatus: 0,
      },
      rangePickerTime: [],
      indeterminateType: false,
      indeterminateGrade: false,
      checkAllType: false,
      checkAllGrade: false,
      btnLocation3: false,
      popoverShow: false,
      bilkTypeOptions: [
        // { label: '仿冒公务员', value: '1' },
        // { label: '贷款类', value: '2' },
        // { label: '杀猪盘类', value: '3' },
        // { label: '投资理财类', value: '4' },
        // { label: '刷单类', value: '5' },
        // { label: '仿冒客服类', value: '6' },
        // { label: '虚假购物、服务类', value: '7' },
        // { label: '网络婚类、交友类', value: '8' },
        // { label: '冒充军警购物诈骗', value: '9' },
        // { label: '虚假征信类', value: '10' },
        // { label: '网络游戏产品虚假交易类', value: '11' },
        // { label: '冒充领导、熟人类', value: '12' },
        // { label: '其他类型诈骗', value: '13' },
      ],
      warnLevelOptions: [],
      weekData: [
        { value: '1', label: '周一' },
        { value: '2', label: '周二' },
        { value: '3', label: '周三' },
        { value: '4', label: '周四' },
        { value: '5', label: '周五' },
        { value: '6', label: '周六' },
        { value: '7', label: '周日' },
      ],
      jCheckboxOptions1: [
        { label: '中危', value: '中危' },
        { label: '高危', value: '高危' },
      ],
      jCheckboxOptions2: [{ label: '有详细位置信息', value: '1' }],
      jCheckboxOptions3: [{ label: '未电话联系', value: '1' }],
      levelTimingSwitchOptions: [
        { value: '高危', text: '高危' },
        { value: '中危', text: '中危' },
        { value: '低危', text: '低危' },
        { value: '其他', text: '其他' },
      ],
      radioStyle: {
        display: 'block',
        height: '30px',
        lineHeight: '30px',
      },
      id: this.$route.query.id,
      limitDecimals: limitDecimals,
      limitDecimals1: limitDecimals1,
      loadingDelete: false,
      notifyPromise: Promise.resolve(),
      confirmLoading: false,
      selectKeys: [],
      disposalDictOptions:getDictItemsFromCache('disposal_pattern')
    }
  },
  async created() {
    // this.$set(this.formData, 'dataBackfillHighConfig', this.disposalDictOptions.map(v => { return v.value }).join(','))
    this.$nextTick(() => {
      this.bilkTypeOptions = this.$refs.bilkTypeMultiSelect.dictOptions
      this.warnLevelOptions = this.$refs.warnLevelMultiSelect.dictOptions
      if (this.id) {
        //编辑
        this.getDataById()
      } else {
        //新增
        this.checkAllType = true
        this.checkAllGrade = true
        this.formData.bilkType = this.bilkTypeOptions
          .map((val) => {
            return val.value
          })
          .join(',')
        this.formData.warnLevel = this.warnLevelOptions
          .map((val) => {
            return val.value
          })
          .join(',')
      }
    })
  },
  mounted() {
    if (window.history && window.history.pushState) {
      history.pushState(null, null, document.URL)
      window.addEventListener('popstate', this.onCancel, false)
    }
  },
  // 页面销毁时，取消监听。否则其他vue路由页面也会被监听
  destroyed() {
    window.removeEventListener('popstate', this.onCancel, false)
  },
  methods: {
    moment,
    onCheckboxChange(checkedValues) {
      console.log('checked = ', checkedValues)
      if (checkedValues.includes(1)) {
        this.formData.highStatus = 1
      } else {
        this.formData.highStatus = 0
      }
      if (checkedValues.includes(2)) {
        this.formData.middleStatus = 1
      } else {
        this.formData.middleStatus = 0
      }
      if (checkedValues.includes(3)) {
        this.formData.lowStatus = 1
      } else {
        this.formData.lowStatus = 0
      }
      console.log(this.formData.highStatus, this.formData.middleStatus, this.formData.lowStatus)
    },
    onChangeType(checkedValues) {
      let checkedValuesList = checkedValues ? checkedValues.split(',') : []
      this.indeterminateType = !!checkedValuesList.length && checkedValuesList.length < this.bilkTypeOptions.length
      this.checkAllType = checkedValuesList.length === this.bilkTypeOptions.length
    },
    onChangeGrade(checkedValues) {
      let checkedValuesList = checkedValues ? checkedValues.split(',') : []
      this.indeterminateGrade = !!checkedValuesList.length && checkedValuesList.length < this.warnLevelOptions.length
      this.checkAllGrade = checkedValuesList.length === this.warnLevelOptions.length
    },
    onCheckAllTypeChange(e) {
      this.indeterminateType = false
      this.checkAllType = e.target.checked
      this.formData.bilkType = e.target.checked
        ? this.bilkTypeOptions
            .map((val) => {
              return val.value
            })
            .join(',')
        : null
    },
    onCheckAllGradeChange(e) {
      this.indeterminateGrade = false
      this.checkAllGrade = e.target.checked
      this.formData.warnLevel = e.target.checked
        ? this.warnLevelOptions
            .map((val) => {
              return val.value
            })
            .join(',')
        : null
    },
    // onHandleLocation(e,val){
    //   if (e.target.className.indexOf('btn-select') === -1) {
    //     e.target.className = 'btn-space btn-select ant-btn' // 选中
    //     if(val==3){
    //       this.btnLocation3 = true
    //     }

    //     this.formData.locationArr.push(val)
    //   }else {
    //     e.target.className = 'btn-space btn-unselect ant-btn'// 反选
    //     if(val==3){
    //       this.btnLocation3  = false
    //     }
    //     for (var i = 0; i < this.formData.locationArr.length; i++) {
    //       if (this.formData.locationArr[i] === val) {
    //         this.formData.locationArr.splice(i, 1)
    //           break
    //         }
    //       }
    //   }
    //   console.log(this.formData.locationArr)

    // },

    onSave() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.confirmLoading = true
          if (this.formData.autoSendSms == '0') {
            this.formData.autoSendWeek = '1,2,3,4,5,6,7'
            this.formData.autoSendStartTime = '22:00'
            this.formData.autoSendEndTime = '08:00'
          }
          if (this.formData.isOpenSmsNum == '0') {
            this.formData.maxSmsNum = 2
            this.formData.timeInterval = 3
          }
          if (this.formData.isOpenLimitData == '0') {
            this.formData.maxDataNum = undefined
          }
          if (this.id) {
            //编辑
            this.handleEdit()
          } else {
            //新增
            this.handleAdd()
          }
        }
      })
    },
    handleAdd() {
      policyConfigAdd(this.formData)
        .then((res) => {
          if (res.success) {
            this.$message.success(res.message)
            this.onCancel()
          } else {
            this.$message.warning(res.message ? res.message : '请求失败！')
          }
        })
        .catch((e) => {
          this.$message.warning('请求失败！')
        })
        .finally(() => {
          this.confirmLoading = false
        })
    },
    handleEdit() {
      policyConfigEdit(this.formData)
        .then((res) => {
          if (res.success) {
            this.$message.success(res.message)
            this.onCancel()
          } else {
            this.$message.warning(res.message ? res.message : '请求失败！')
          }
        })
        .catch((e) => {
          this.$message.warning('请求失败！')
        })
        .finally(() => {
          this.confirmLoading = false
        })
    },
    getDataById() {
      policyConfigQueryById({ id: this.id })
        .then((res) => {
          if (res.success) {
            this.$nextTick(() => {
              this.formData = res.result
              //智能语音配置勾选
              if (this.formData.highStatus == 1) {
                this.selectKeys.push(1)
              }
              if (this.formData.middleStatus == 1) {
                this.selectKeys.push(2)
              }
              if (this.formData.lowStatus == 1) {
                this.selectKeys.push(3)
              }
              // this.selectKeys = [1,2,3]
              this.onChangeType(this.formData.bilkType)
              this.onChangeGrade(this.formData.warnLevel)
              this.openNotification(this.formData.stationMessageStatus, '开启消息通知，及时查看预警消息')
            })
          } else {
            this.$message.warning(res.message ? res.message : '请求失败！')
          }
        })
        .catch((e) => {
          this.$message.warning('请求失败！')
        })
        .finally(() => {})
    },
    onDelete() {
      let that = this
      this.$confirm({
        title: '提示',
        content: '确定要删除吗 ?',
        okText: '确认',
        okType: 'danger',
        cancelText: '取消',
        onOk() {
          that.loadingDelete = true
          policyConfigDelete({ id: that.id })
            .then((res) => {
              if (res.success) {
                that.$message.success(res.message)
                that.onCancel()
              } else {
                that.$message.warning(res.message ? res.message : '请求失败！')
              }
            })
            .catch((e) => {
              that.$message.warning('请求失败！')
            })
            .finally(() => {
              that.loadingDelete = false
            })
        },
      })
    },
    onCancel() {
      this.closeCurrent()
      this.$router.push({ path: '/earlyWarning/strategy/policyConfig/list' })
    },
    onConfig() {
      this.$router.push({ path: '/earlyWarning/strategy/designateList' })
    },
    changeTime(val, dateStrings, type) {
      if (type === 'autoSendStartTime') {
        this.formData.autoSendStartTime = dateStrings
      } else {
        this.formData.autoSendEndTime = dateStrings
      }
    },
    disabledDate(current) {
      // Can not select days before today and today
      return current && current < moment().endOf('day')
    },
    onChangeStatus(e) {
      if (e.target.value == '0') {
        this.rangePickerTime = []
      }
    },
    onChangeIMediate(date, dateString) {
      if (dateString) {
        this.formData.startEffectDate = dateString[0]
        this.formData.endEffectDate = dateString[1]
      }
    },
    handleClickChange(visible) {
      // if(!this.btnLocation3){
      //   this.popoverShow = false
      // }else{
      //   this.popoverShow = visible;
      // }
      if (this.formData.positionPloy == 3) {
        this.popoverShow = visible
      } else {
        this.popoverShow = false
      }
    },
    changeLocation(value) {
      this.formData.positionPloy = value
      // value === this.formData.positionPloy ? this.formData.positionPloy = "" :this.formData.positionPloy = value;
    },
    modalFormOk() {},
    onSelectMsgChange(value) {
      if (!value) {
        this.formData.smsTemplateId = ''
      }
    },
    onSelectVoiceMsgChange(value) {
      if (!value) {
        this.formData.voiceTemplateId = ''
      }
    },
    openNotification(value, msg, top) {
      if (!top) top = '220px'
      this.notifyPromise = this.notifyPromise.then(this.$nextTick).then(() => {
        if (value == '0') {
          this.$notification['warning']({
            // message: "提示",
            description: msg,
            // duration: 0,
            class: 'custom-class',
            style: {
              width: '600px',
              top: top,
              border: '1px solid',
              borderColor: 'rgba(255, 229, 143, 1)',
              background: 'rgba(255, 251, 230, 1)',
            },
          })
        }
      })
    },
    changeTimingSwitch(value, file) {
      console.log(value, file)
    }
  },
}
</script>

<style lang="less" scoped>
.main-div {
  .tooltip-wrap {
    margin-right: 10px;
    // margin-left: -10px;
  }
  /deep/.ant-card-head-title {
    font-weight: 700;
    // padding-left: 12px;
  }
  /deep/.ant-card-body {
    padding: 24px 36px;
  }
  .btn-select {
    color: #40a9ff;
    background-color: #fff;
    border-color: #40a9ff;
  }
  .btn-unselect {
    color: rgba(0, 0, 0, 0.65);
    background-color: #fff;
    border-color: #d9d9d9;
  }
  .btn-space {
    margin-right: 10px;
  }
  /deep/.ant-col-24 {
    height: 80px;
  }
  /deep/.ant-checkbox-group {
    line-height: 2.8;
  }
  /deep/.ant-btn > .anticon + span,
  .ant-btn > span + .anticon {
    margin-left: 2px;
  }
  /deep/.ant-row {
    display: -webkit-box;
  }
  .type-item {
    margin-right: 50px;
    // /deep/label {
    //     width: 187px;
    // }
    // /deep/.ant-form-item-children {
    //   display: flex;
    //   width: 100%;
    // }
    .all-check-item {
      line-height: 2.8;
      position: absolute;
    }
    .check-item {
      margin-left: 68px;
    }
  }
  .push-poliicy {
    /deep/.ant-form-item label {
      line-height: 38px;
    }
  }
  .sms-time-wrap {
    /deep/.ant-form-explain {
      color: #f5222d;
      margin-left: 115px;
    }
  }
  .sms-count-wrap {
    margin-left: -12px !important;
    /deep/.ant-form-explain {
      color: #f5222d;
      padding-left: 185px;
    }
  }
  .sms-configure {
    /deep/.ant-form-item-label {
      width: 130px;
    }
  }
  .sms-configure-xing {
    /deep/.ant-form-item-label {
      width: 143px;
    }
  }
  .limit-count-wrap {
    margin-left: -12px !important;
    /deep/.ant-form-explain {
      color: #f5222d;
      padding-left: 143px;
    }
  }
  /deep/.ant-checkbox-wrapper + .ant-checkbox-wrapper {
    margin-left: 0px;
  }
  /deep/.ant-checkbox-wrapper {
    margin-right: 8px;
  }
  .xxts /deep/.ant-form-item-label {
    width: 121px;
  }
}
</style>
<style lang="less">
.custom-class {
  position: fixed;
  // top: 220px !important;
  left: 55% !important;
  transform: translate(-50%, -50%) !important;

  .ant-notification-notice-description {
    // color: #40a9ff;
    margin-top: -20px;
  }
}
</style>
